<template>
  <Wrapper>
    <el-card header="长按指令" shadow="never">
      <el-button v-longpress="handleLongPress">默认2s</el-button>
      <el-button v-longpress:4000="handleLongPress">自定义4s</el-button>
    </el-card>

    <el-card header="复制指令" shadow="never" class="card-box">
      <el-row :gutter="10" style="margin-bottom: 12px">
        <el-space>
          <el-input v-model="copyValue" />
          <el-button v-copy="copyValue">点击复制</el-button>
        </el-space>
      </el-row>
      <el-row :gutter="10">
        <el-space>
          <el-input v-model="copyValue" />
          <el-button v-copy:dblclick="copyValue">双击复制</el-button>
        </el-space>
      </el-row>
    </el-card>

    <el-card header="防抖指令" shadow="never" class="card-box">
      <el-button v-debounce="{ delay: 2000, fn: debounce }"
        >防抖指令,2s</el-button
      >
      <el-button v-debounce="{ delay: 2000, fn: debounce, immediate: true }"
        >防抖指令,2s,立即执行</el-button
      >
      <el-button
        v-debounce="{
          delay: 2000,
          fn: () => debounce('我是信息'),
          immediate: true,
        }"
        >防抖传参数</el-button
      >
    </el-card>
  </Wrapper>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const copyValue = ref('这是一段文字')

function handleLongPress() {
  ElMessage.success('长按指令生效')
}

function debounce(message) {
  ElMessage.success(message || '防抖指令生效')
}
</script>
